<!DOCTYPE html>
<extend name="Base:base"/>
<block name="title">
    <title>微印</title>
<import type='js' file='Js.jquery'/>
<import type='js' file='Js.main'/>
<import type="css" file='Css.main'/>
</block>
<block name="content">
<!--轮播图-->
<a href="#" id="toLeft" class="toLeft" onclick="doMove(this.id)" style="cursor: pointer;background: url(__PUBLIC__/img/zbbg_24.png); background-position:0px -150px ;"></a>
<a href="#" id="toRight" class="toRight" onclick="doMove(this.id)"style="cursor: pointer;background: url(__PUBLIC__/img/zbbg_24.png); background-position: -50px -150px;"></a>
<div class="main">
    <div class="show">
        <div class="img_list">
           <ul>
            <li><a href="register.html" target="_blank"><img src="__PUBLIC__/img/show1.png"></a></li>
			<li><a href="register.html" target="_blank"><img src="__PUBLIC__/img/show2.png"></a></li>
            <li><a href="register.html" target="_blank"><img src="__PUBLIC__/img/show3.png" ></a></li>
            </ul>
        </div>
    </div>	
    <div class="mainBox">
        <div class="print">
           <div class="printButton" style="cursor: pointer;background: url(__PUBLIC__/img/print.png) no-repeat"></div>
            <form id="printForm" name="printForm" enctype="multipart/form-data" action="javascript:;" >
               <div class="printForm" hidden="block" >
                  <ul>
                      <li>
					     <p style="color:red;">为了线上传输和打印方便，文档类别请选择PDF格式文件</p>        
                          <span>选择文件及类型:</span>
						  <!--上传文件-->
                          <div class="uploader white">
                              <input type="text" class="filename" readonly/>
                              <input type="button" class="button" value="上传文件"/>
                              <input id="file" name="file" type="file" value=""/>
                           </div>
                      </li>
                      <li>
					       </br>
						   </br>
						   <!--选择类型-->
                           <label><input id="text" name="printType" type="radio" value="1"/>文档/论文 </label>
                           <label><input id="photo" name="printType" type="radio" value="2" />证件照 </label>
						   <label><input id="book" name="printType" type="radio" value="3" />书籍 </label>
                           <label><input id="portable"name="printType" type="radio" value="4" />易拉宝展架 </label>
                            <br/>
                           <label><input id="brush"name="printType" type="radio" value="5" />喷绘/灯箱/KT板</label>
						   <label><input id="DM" name="printType" type="radio" value="6" />DM传单 </label>
                           <label><input id="poster"name="printType" type="radio" value="7" />海报 </label> 
                           <label><input id="banner"name="printType" type="radio" value="8" />横幅 </label>  
						   <label><input id="card"name="printType" type="radio" value="9" />名片 </label>
                      </li>
                      <li>
					        <!--如果类型是文档 则选择打印规格 和单双面-->
                            <div id="textStandard" style="display: none">
                                 <span>打印规格：</span>
                                 <div class="set">
                                     <label><input name="textStandard1" type="radio" value="A4" checked/>A4 </label>
                                     <label><input name="textStandard1" type="radio" value="A3" />A3 </label>
									 <label><input name="textStandard1" type="radio" value="B5" />B5 </label>
                                  </div>
                                  <span>单双面：</span>
                                <div class="set">
                                    <label><input name="textStandard2" type="radio" value="单面打印" checked/>单面打印</label>
                                    <label><input name="textStandard2" type="radio" value="双面打印" />双面打印</label>
                                </div>
								<span>效果：</span>
								<div class="set">
                                    <label><input name="textStandard3" type="radio" value="黑白" checked/>黑白</label>
                                    <label><input name="textStandard3" type="radio" value="彩色" />彩色</label>
                                </div>									
                             </div>
                      </li>
                      <li>
					  <!--如果类型是照片 则选择底色和尺寸-->
                           <div id="photoStandard" style="display: none">
                                <span>底色：</span>
                               <div class="set">
                                   <label><input name="photoStandard1" type="radio" value="蓝色" checked/>蓝色 </label>
                                   <label><input name="photoStandard1" type="radio" value="红色" />红色 </label>
                               </div>
                                <span>尺寸：</span>
                               <div class="set">
                                   <label><input name="photoStandard2" type="radio" value="1寸" checked/>1寸 </label>
                                   <label><input name="photoStandard2" type="radio" value="1.5寸" />1.5寸 </label>
                                   <label><input name="photoStandard2" type="radio" value="2寸" />2寸 </label>
								   <label><input name="photoStandard2" type="radio" value="6寸" />6寸 </label>
                                   <label><input name="photoStandard2" type="radio" value="7寸" />7寸 </label>
                               </div>
                           </div>
                      </li>
					  <li>
					  <!--类型book-->
                           <div id="bookStandard" style="display: none">
                                <span>打印规格：</span>
                                 <div class="set">
                                     <label><input name="bookStandard1" type="radio" value="A4" checked/>A4 </label>
                                     <label><input name="bookStandard1" type="radio" value="A3" />A3 </label>
									 <label><input name="bookStandard1" type="radio" value="B5" />B5 </label>
                                  </div>
								<span>单双面：</span>
                                <div class="set">
                                    <label><input name="bookStandard2" type="radio" value="单面打印" checked/>单面打印</label>
                                    <label><input name="bookStandard2" type="radio" value="双面打印" />双面打印</label>
                                </div>
                               <span>装订类型：</span>
                               <div class="set">
                                   <label><input name="bookStandard3" type="radio" value="胶装" checked/>胶装 </label>
                                   <label><input name="bookStandard3" type="radio" value="骑马钉" />骑马钉 </label>                     
                               </div>
                           </div>
                      </li>				  	 
					  <li>
					  <!--类型易拉宝-->
						    <div id="portableStandard" style="display: none">
							<span>打印规格：</span>
							    <div class="set">
                                   <label><input name="portableStandard1" type="radio" value="160*60" checked/>160*60(cm) </label>
                                   <label><input name="portableStandard1" type="radio" value="180*80" />180*80(cm)</label>
                                </div>						
					    </li>
                      <li>
					  <!--类型喷绘-->
						    <div id="brushStandard" style="display: none">
							    <div class="set">
                                 <span>请通过我要设计与设计师联系，我们会通过你的需求来设计满足你需求的作品</span>
                                </div>
							</div>
					  </li>					
					<li>
					  <!--类型DM-->
                           <div id="DMStandard" style="display: none">
                                <span>打印规格：</span>
                                 <div class="set">
                                     <label><input name="DMStandard1" type="radio" value="128g铜板纸" checked/>128g铜板纸 </label>
                                     <label><input name="DMStandard1" type="radio" value="157g铜版纸" />157g铜版纸 </label>
									 <label><input name="DMStandard" type="radio" value="200g铜版纸" />200g铜版纸 </label>
                                  </div>
								<span>单双面：</span>
                                <div class="set">
                                    <label><input name="DMStandard2" type="radio" value="单面打印" checked/>单面打印</label>
                                    <label><input name="DMStandard2" type="radio" value="双面打印" />双面打印</label>
                                </div>
                               <span>打印效果：</span>
                               <div class="set">
                                   <label><input name="DMStandard3" type="radio" value="黑白" checked/>黑白</label>
                                   <label><input name="DMStandard3" type="radio" value="彩色" />彩色</label>                   
                               </div>
                           </div>
                      </li>
					  <li>
					  <!--类型喷绘-->
						    <div id="posterStandard" style="display: none">
							    <div class="set">
                                 <span>请通过我要设计与设计师联系，我们会通过你的需求来设计满足你需求的作品</span>
                                </div>
							</div>
					  </li>	
					  <li>
					  <!--类型喷绘-->
						    <div id="bannerStandard" style="display: none">
							    <div class="set">
                                 <span>请通过我要设计与设计师联系，我们会通过你的需求来设计满足你需求的作品</span>
                                </div>
							</div>
					  </li>	
					  <li>
					  <!--类型名片-->
						    <div id="cardStandard" style="display: none">
							    <div class="set">
                                 <span>请通过我要设计与设计师联系，我们会通过你的需求来设计满足你需求的作品</span>
                                </div>
							</div>
					  </li>
                      <li><!--填写份数-->
                             <div class="numberSet">
                               <span>份数：</span>
                               <input id="number"name="number"class="number" type="text"value="1">
                             </div>
							<!--备注-->
                             <div class="remarkBox ">
                              <span>备注:</span>
                               <input id="remark"name="remark"class="remark">
                             </div>
                      </li>
                      <li>
					  <!--这里是默认地址后天数据输出-->
                             <div class="set hSet">
                                 <span>送达地址：</span>
                                 <span id="deflautaddress" class="black">天津大学新校区5斋3楼320</span>
                                 <span id="deflautname" class="black" >张伟</span>
                                 <span id="deflautphonenumber" class="black">15620525885</span>
                                 <a id="addressSet" href="#" >[修改]</a>
                             </div>
                      </li>
                      <li>
                          <div>
						  <!--后台计算打印金额-->
                              <span>支付金额：</span>
                              <span id="money"></span>
                          </div>
                      </li>
                  </ul>
				  <!--判断填写完整 js提交表单-->
				  <li>
                   <button class="completeBtn" id="print-btn" type="submit">立刻打印</button>
                  </li>
				  <br/>
                </div>
				<!--修改不用涉及数据库修改-->
			  	  <div class="addressBox"  style="display: none">
                    <div class="row1">
                    修改地址
                    <a id="closeBtn" class="close_btn" title="关闭窗口" href="javascript:void(0)" style="color:rgb(153,153,153);">X</a>

                    <div class="row">你的姓名
                                  <span class="inputBox"> 
                                      <input id="name" name="name" type="text">
                                  </span>
                    </div>

                    <div class="row">手机号码
                                  <span class="inputBox">
                                      <input id="phoneNumber" name="phoneNumber" type="text">
                                  </span>
                    </div>

                    <div class="row">收货地址
                                  <span class="inputBox">
                                      <input id="address" name="address"type="text">
                                  </span>
                    </div>
                    <a id="addressBtn" href="#" style="opacity: 0.6">确定修改</a>
                  </div>
                </div>
            </form>
         
          </div>
          <div class="design" >
              <div class="designBtn" style="cursor:pointer;background: url(__PUBLIC__/img/design.png) no-repeat"></div>
              <div class="qqForm" hidden="1">
                  <br/>
                  <div>
                  <p class="pSet1">Thomson </p><p class="pSet2"> Adelais</p><p class="pSet3">微信扫一扫</p>
                  </div>
                  <a class="positonSet" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2224752336&site=qq&menu=yes"><img    src="__PUBLIC__/img/boy.png"alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
                  <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=544212475&site=qq&menu=yes"><img  src="__PUBLIC__/img/girl.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
                  <div class="code"><img src="__PUBLIC__/img/code.jpg" height="150px"width="150px" ></div>
              </div>
              </div>
          </div>
      </div>
    </div>
</div>

<script type="text/javascript">
    var index = 0;
    var timer = 0;
    var ulist = $('.img_list ul');
    var list = ulist.find('li');
    var llength = list.length;//li的个数，用来做边缘判断
    var lwidth = $(list[0]).width();//每个li的长度，ul每次移动的距离
    var uwidth = llength * lwidth;//ul的总宽度
   function auto(){
//定时器
        timer = setInterval("doMove('toRight')",3000);
        $('.img_list li, .toRight, .toLeft').hover(function() {
            clearInterval(timer);
        }, function() {
            timer = setInterval("doMove('toRight')",3000);
        });
    }
    function doMove(direction){
        //向右按钮
        if (direction =="toRight") {
            index++;
            if (index < llength) {
                uwidth = lwidth * index;
                //ulist.css('left',-uwidth);
                ulist.animate({left: -uwidth}, 1000);

            } else {
                //ulist.animate({left: 0}, 1000);
                ulist.css('left', '0px');
                index = 0;
            }
        }
        else if(direction =="toLeft"){
                index--;
                if ( index < 0) {
                    index = llength-1 ;
                }
                uwidth = lwidth *index;
                //ulist.css('left',-uwidth);
                ulist.animate({left: -uwidth}, 1000);
                //点击数字跳转
            };
    }
    auto();
    jQuery(document).ready(function($) {
      $('#printForm').submit(function(event) {
        var file=document.getElementById("file").value;

        var number=document.getElementById("number").value;

        var type = document.getElementsByName("printType");
        var checkdType="";
        for(var i=0; i<type.length; i++){
            if(type[i].checked){
                checkdType=type[i].value;
            }
        }
        if(file!=""&&number!=""&&checkdType!=""){
            // document.getElementById("printForm").submit();
            var formData = new FormData($(this)[0]);
            console.log(formData);

            $("#print-btn").attr('disabled', true);
            $.ajax({
              url: "{:U('/Home/Order/addOrder')}",
              type: 'POST',
              data: formData,
              async: false,
              cache: false,
              contentType: false,
              processData: false,
            })
            .done(function(data) {
              console.log(data);
              data = $.parseJSON(data);
              if(data.code == 200){

              }
              alert(data.msg);
            })
            .fail(function() {
              console.log("error");
            })
            .always(function() {
              $("#print-btn").attr('disabled', false);
              console.log("complete");
            });
        }else{
            alert("请把必要信息填写完整");
        }

        return false;
      });
    });
</script>
</block>
<block name="foot"></block>
</html>